<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" :class="{ 'menu-collapsed': isMenuCollapsed }">

        <div class="logo left-db">
          <img src="@/assets/vue.svg">
          <span v-if="!isMenuCollapsed" class="know-title">知识管理平台</span>
        </div>
        <el-icon class="menu-top" @click="toggleMenu"><Menu /></el-icon>
         
        <!-- 其他菜单项 -->
        <el-menu :collapse="isMenuCollapsed" :collapse-transition="false" router>
          <el-menu-item index="/my-knowledge-base">
            <el-icon><Stopwatch /></el-icon>
            <template #title><span>我的知识库</span></template>
          </el-menu-item>
          <el-menu-item v-if="isSuperAdmin" index="/manage-knowledge-base">
            <el-icon><Plus /></el-icon>
            <template #title><span>管理知识库</span></template>
          </el-menu-item>

          <el-menu-item index="/search">
            <el-icon><Search /></el-icon>
            <template #title><span>搜一搜</span></template>
          </el-menu-item>

        

          <el-menu-item @click="showLogoutConfirm">
            <el-icon><SwitchButton /></el-icon>
            <template #title><span>退出登录</span></template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-scrollbar>
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts">
import useUserStore from '@/store/modules/user';
import { ElAside, ElContainer, ElMain, ElMenu, ElMenuItem, ElMessageBox, ElNotification, ElScrollbar } from 'element-plus';
import { config } from 'process';
import { computed, defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import useMenuToggle from './components/useMenuToggle';


export default defineComponent({
  name: 'MainLayout',
  components: {
    ElContainer,
    ElAside,
    ElMain,
    ElScrollbar,
    ElMenu,
    ElMenuItem,
    config
},
  setup() {
    const { isMenuCollapsed, toggleMenu } = useMenuToggle();
    const userStore = useUserStore();
    const router = useRouter();
    // 创建一个计算属性来检查用户角色是否为 admin
    const isAdmin = computed(() => userStore.getRoleName.includes('admin'));
    const isSuperAdmin = computed(() => userStore.getRoleName.includes('super_admin'));

    function showLogoutConfirm() {
      ElMessageBox.confirm(
        '确定要退出登录吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        logout();
      }).catch(() => {
        ElNotification({
          title: '取消',
          message: '您取消了退出登录的操作。',
          type: 'info'
        });
      });
    }

    function logout() {
      userStore.loginOut();
      ElNotification({
        title: '成功',
        message: '您已成功退出登录。',
        type: 'success'
      });
      router.push({ path: '/login' });
    }

    return {
      isAdmin, // 返回计算属性以便在模板中使用
      isMenuCollapsed,
      toggleMenu,
      showLogoutConfirm
    };
  }
});
</script>

<style scoped>
/* 对应的样式 */
.common-layout {
  width: 100%;
  height: 100vh;
}


.menu-top{
  margin-left: 23px; 
  margin-top: 15px;
}


.left-db {
  background-color: var(--el-menu-bg-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 25px;
}

.el-container {
  height: 100vh;
}

.el-aside {
  background-color: var(--el-menu-bg-color);
  color: #333;
  text-align: left;
  line-height: normal;

  &.menu-collapsed {
    /* 折叠时宽度 */
    width: 64px !important; 
  }

  .el-menu {
    border-right: none;
  }
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: left;
  line-height: normal;
}
</style>